﻿export default {
  props: ['dialogInfo'],
  data () {
    return {
      dialogTitle: '新增仪表板',
      dialogFormVisible: false,
      labelWidth: '80px',
      dialogLoading: false,
      // 表单部分
      ruleForm: {
        uid: '',
        title: '',
        desc: '',
        route: '',
        settings_json: ''
      },
      // 表单规则部分
      rules: {
        title: [
          {required: true, message: '仪表板名称不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.initDialog()
  },
  methods: {
    // 初始化表单时
    initDialog () {
      this.dialogTitle = this.dialogInfo.operationType === 'edit' ? '编辑仪表板基础信息' : (this.dialogInfo.operationType === 'add' ? '新增仪表板' : '仪表板基础信息预览')
      this.ruleForm = {
        uid: this.dialogInfo.rowInfo ? this.dialogInfo.rowInfo.uid : '',
        title: this.dialogInfo.rowInfo ? this.dialogInfo.rowInfo.title : '',
        desc: this.dialogInfo.rowInfo ? this.dialogInfo.rowInfo.desc : '',
        route: this.dialogInfo.rowInfo ? this.dialogInfo.rowInfo.route : '',
        settings_json: this.dialogInfo.rowInfo ? this.dialogInfo.rowInfo.settings_json : ''
      }
    },
    // 新增的方法
    addMethod () {
      this.dialogLoading = true
      this.$post('/icpbidashboard', {
        title: this.ruleForm.title,
        desc: this.ruleForm.desc,
        route: this.ruleForm.route,
        settings_json: this.ruleForm.settings_json
      }).then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$emit('operationBasicSuccess')
        } else {
          this.$message({
            message: dataResult.msg,
            type: 'warning'
          })
        }
        this.dialogLoading = false
      }).catch((error) => {
        console.log(error)
      })
    },
    // 编辑的方法
    editMethod () {
      this.dialogLoading = true
      this.$patch('/icpbidashboard/' + this.ruleForm.uid, {
        title: this.ruleForm.title,
        desc: this.ruleForm.desc,
        route: this.ruleForm.route,
        settings_json: this.ruleForm.settings_json
      }).then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.$emit('operationBasicSuccess')
        } else {
          this.$message({
            message: dataResult.msg,
            type: 'warning'
          })
        }
        this.dialogLoading = false
      })
    },
    // 点击弹窗的取消按钮
    resetForm (forms) {
      this.$refs[forms].clearValidate()
      this.$emit('operationReset')
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
      this.$emit('operationReset')
    },
    // 点击弹窗的确定按钮
    submitForm (forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          if (this.dialogInfo.operationType === 'edit') {
            this.editMethod()
          } else if (this.dialogInfo.operationType === 'add') {
            this.addMethod()
          }
        } else {
          return false
        }
      })
    }
  },
  watch: {
    'dialogInfo.dialogFormVisible': {
      handler: function (val, oldVal) {
        this.dialogFormVisible = val
        if (val) {
          this.initDialog()
        }
      },
      deep: true
    }
  }
}
